<!--财务     营业报表-->
<template>
  <div class="app-container">
  <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
    <el-form-item label="查询日期" prop="dealDate">
      <el-date-picker clearable
                      v-model="queryParams.startDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择起始交易日期">
      </el-date-picker>
      ----
      <el-date-picker clearable
                      v-model="queryParams.endDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择截止交易日期">
      </el-date-picker>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form-item>
  </el-form>

  <el-tabs type="border-card"  @tab-click="operationTypeChange">
    总金额：{{sum_zong}}元<br>
    <span>押&nbsp金(总计):{{yajin}}元  &nbsp&nbsp&nbsp&nbsp   租金(总计)：{{zujin}} 元&nbsp&nbsp&nbsp&nbsp  电费(总计):{{dianfei}}元 &nbsp&nbsp&nbsp&nbsp
          水费(总计):{{shuifei}} 元   &nbsp&nbsp&nbsp&nbsp   宽带(总计):{{kuandai}}元   &nbsp&nbsp&nbsp&nbsp  燃气费(总计): {{ranqifei}}元 &nbsp&nbsp&nbsp&nbsp
         有线电视(总计):{{youxiandianshi}}元   &nbsp&nbsp&nbsp&nbsp 其他(总计):{{qita}}元</span>
    <el-tab-pane label="收入明细" >

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['property:property:export']"
            >导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="propertyList" >
          <el-table-column label="交易日期" align="center" prop="dealDate" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.dealDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="总计(元)" align="center" prop="total" />
          <el-table-column label="押金(元)" align="center" prop="deposit" />
          <el-table-column label="租金(元)" align="center" prop="rent" />
          <el-table-column label="电费(元)" align="center" prop="electricityFee" />
          <el-table-column label="水费(元)" align="center" prop="waterFee" />
          <el-table-column label="宽带费(元)" align="center" prop="netFee" />
          <el-table-column label="燃气费(元)" align="center" prop="gasFee" />
          <el-table-column label="有线电视费(元)" align="center" prop="cableFee" />
          <el-table-column label="其他(元)" align="center" prop="otherFee" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['property:property:edit']"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
    </el-tab-pane>
    <el-tab-pane label="支出明细" >
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['property:property:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="propertyList">
        <el-table-column label="交易日期" align="center" prop="dealDate" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.dealDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作类型,1：收入，2：支出" align="center" prop="operationType" />
        <el-table-column label="总计(元)" align="center" prop="total" />
        <el-table-column label="押金(元)" align="center" prop="deposit" />
        <el-table-column label="租金(元)" align="center" prop="rent" />
        <el-table-column label="电费(元)" align="center" prop="electricityFee" />
        <el-table-column label="水费(元)" align="center" prop="waterFee" />
        <el-table-column label="宽带费(元)" align="center" prop="netFee" />
        <el-table-column label="燃气费(元)" align="center" prop="gasFee" />
        <el-table-column label="有线电视费(元)" align="center" prop="cableFee" />
        <el-table-column label="其他(元)" align="center" prop="otherFee" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['property:property:edit']"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>

  <pagination
    v-show="total>0"
    :total="total"
    :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize"
    @pagination="getList"
  />
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="dealDate" label="日期" width="150"></el-table-column>
        <el-table-column property="room_name" label="姓名" width="200"></el-table-column>
        <el-table-column property="tenant_name" label="地址"></el-table-column>
        <el-table-column property="tenant_phone" label="地址"></el-table-column>
        <el-table-column property="item_type" label="地址"></el-table-column>
        <el-table-column property="deal_desc" label="地址"></el-table-column>
        <el-table-column property="real_payment_amout" label="地址"></el-table-column>
        <el-table-column property="pay_method" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { listProperty, getProperty,   calculate } from "@/api/property/property";

export default {
  name: "Property",
  data() {
    return {
      gridData: [],
      dialogTableVisible: false,
      formLabelWidth: '120px',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 营业报表表格数据
      propertyList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //总金额
      sum_zong: 0,
      // 押金(总计):
      yajin: 0,
      // 租金(总计)：
      zujin: 0,
      // 电费(总计):
      dianfei: 0,
      // 水费(总计):
      shuifei: 0,
      // 宽带(总计):
      kuandai: 0,
      // 燃气费(总计):
      ranqifei: 0,
      // 有线电视(总计):
      youxiandianshi: 0,
      // 其他(总计):
      qita: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        businessId: null,
        businessName: null,
        onlineFlg: null,
        dealDate: null,
        operationType: 1,
        total: null,
        deposit: null,
        rent: null,
        electricityFee: null,
        waterFee: null,
        netFee: null,
        gasFee: null,
        cableFee: null,
        czFee: null,
        otherFee: null,
        reserve1: null,
        reserve2: null,
        reserve3: null,
        reserve4: null,
        reserve5: null,
        delFlg: null,
        createUserid: null,
        updateUserid: null,
      },
      // 表单参数
      form: {},
      startDate:'',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**人脸识别*/
    shi(){
     // https://api-cn.faceplusplus.com/cardpp/v1/ocridcard
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('property/property/export', {
        ...this.queryParams
      }, `property_${new Date().getTime()}.xlsx`)
    },
    /**  搜索  */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** tags表格切换 */
    operationTypeChange(tab, event) {
      if (tab.index == 0) {
        this.queryParams.operationType = 1;
      } else if (tab.index == 1) {
        this.queryParams.operationType = 2;
      }
      this.getList();
    },
    /**计算各种金额 */
    calculate() {
      calculate(this.queryParams.operationType).then(res => {
        this.sum_zong = res.data.sumZong;
        this.yajin = res.data.yajin;
        this.zujin = res.data.zujin;
        this.dianfei = res.data.dianfei;
        this.shuifei = res.data.shuifei;
        this.kuandai = res.data.kuandai;
        this.ranqifei = res.data.rangifei;
        this.youxiandianshi = res.data.youxiandianshi;
        this.qita = res.data.qita;
      })
    },
    /** 查询营业报表列表 */
    getList() {
      this.loading = true;
      this.startDate=this.queryParams.startDate;
      listProperty(this.queryParams).then(response => {
        console.log(response.rows)
        this.propertyList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.calculate();
      });
    },
  /** 查看按钮操作 */
  handleUpdate(row) {
    this.dialogTableVisible=true;
    row.startDate=this.startDate;
    console.log("查看时间：：：：")
    console.log(row )
    getProperty(row).then(response => {
      console.log(response)
      this.gridData = response.data;
      this.loading = false;
      this.calculate();
    });

  },
}

};
</script>
